<template>
    <div class="part3">
        <h1>组件</h1>
        <h2>组件刷新机制</h2>

        <h3>$nextTick</h3>
        <div id="div1" ref="div1" v-if="showDiv">这是一段文本</div>
        <button @click="getText">获取div内容</button>
        <p>会报错,原因是当div显示的时候,执行获取文本时,dom节点并未真正刷新,节点还未被渲染</p>

        <div id="div2" ref="div2" v-if="showDivTick">这是一段文本</div>
        <button @click="getTextTick">获取div内容</button>
    </div>
</template>

<script>
export default {
  name: "part3",
  props: {},
  data() {
    return {
      showDiv: false,
      showDivTick: false
    };
  },
  methods: {
    getText: function() {
      this.showDiv = true;
      let text = this.$refs.div1.innerHTML;
      console.log(text);
    },
    getTextTick: function() {
      this.showDivTick = true;
      this.$nextTick(() => {
        console.log(this);
        let text = this.$refs.div2.innerHTML;
        console.log(text);
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
